<!--<script type="text/javascript">
	//强制刷新
    var a = window.name
    if(a == ''){
    	window.name = "reloded"
    	location.reload()
    }else{
    	window.name=""
    }
</script>-->

<div class="layui-body-header">
	<h2>商圈管理</h2>
</div>

<div class="layui-card-body">
	
	<div class="layui-fluid">
		<div class="layui-card">
		          <div class="layui-card-header">
		            <!-- <span>所有会员列表</span> -->
		            <a href="#/layui/addBusi" class="layui-btn layui-btn-sm">
		              <i class="layui-icon">&#xe654;</i>
		              <span>新增商圈</span>
		            </a>
		            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary changeInte">
		              <i class="layui-icon">&#xe673;</i>
		              <span>变更等级积分</span>
		            </button>
		            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger batchDel">
		              <i class="layui-icon ">&#xe640;</i>
		              <span>批量删除</span>
		            </button>
		            <!--<button type="button" class="layui-btn layui-btn-sm layui-btn-primary downs">
		              <i class="layui-icon">&#x1007;</i>
		              <span>禁止商圈</span>
		            </button>-->
		            <!--<a href="#/member/all/edit" class="layui-btn layui-btn-sm layui-btn-primary">
		              <i class="layui-icon">&#xe62f;</i>
		              <span>导出到Excel</span>
		            </a>-->
		            <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" id="search_hash">
		              <i class="layui-icon">&#xe615;</i>
		            </a>
		          </div>
		          <div class="layui-card-body">
		            <table id="test" lay-filter="test"></table>
		            <script type="text/html" id="bartest">
		              <button class="layui-btn layui-btn-xs"  lay-event="watchMem">查看成员</button>
		              <button class="layui-btn layui-btn-xs" type="button" lay-event="detail">编辑</button>
		              <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
		              <!--<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="xiangqing">查看详情</button>-->
		              <!--<button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="changeScore">变更等级积分</button>-->
		            </script>
		          </div>
          	</div>
          </div>
        </div>
      
      
      

<script type="text/html" id="search_tpl_hash">
  <form class="layui-form reForm" action="">
    <!--<div class="layui-form-item">
      <label class="layui-form-label">商圈ID</label>
      <div class="layui-input-block">
        <input type="text" name="title" id="busiId" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>-->
    <div class="layui-form-item">
      <label class="layui-form-label">商圈名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" id="busiName" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!--<div class="layui-form-item">
      <label class="layui-form-label">分会名字</label>
      <div class="layui-input-block">
        <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input">
      </div>
    </div>-->
    <div class="layui-form-item">
      <label class="layui-form-label">商圈城市</label>
      <div class="layui-input-block">
	     <table class="layui-table fenhuiArea"  lay-skin="nob">
				<tbody>
					<tr>
						<td>
							<select name="province" class="province" lay-verify="" lay-filter="provinces"> 
									  <option value="">省份</option>
									</select> 
						</td>
						<td>
							<select name="city" class="city" lay-verify="" lay-filter="citys">
							  <option value="">城市</option>
							</select> 
						</td>
						<td>
							<select name="Area" class="Area" id="quyu" lay-verify="" lay-filter="Areas">
							  <option value="">区域</option>
							</select> 
						</td>
					</tr>
				</tbody>
			</table>
	    </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">商圈等级</label>
      <div class="layui-input-block">
        <select name="memLev" class="memLev" id="memLev" lay-filter="xing">
          <option value="">全部</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formtest"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" id="resets" class="layui-btn layui-btn-primary reset">重置</button>
      </div>
    </div>
  </form>
</script>

<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
</script>
<script>
	
	var search_tpl_hash = document.querySelector("#search_tpl_hash")
	var reForm = document.querySelector(".reForm");
	var batchDel = document.querySelector(".batchDel");
//	let downs = document.querySelector(".downs");
	let changeInte = document.querySelector(".changeInte");
	let checkedArr = [];
	let objArr = [];	
	
  layui.use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      form = layui.form;
    // 注入mock
    layui.mockjs.inject({
      'POST /demo/table/user': {
        code: 0,
        msg: "xxx",
        count: 1000,
        'data|20': [{
          'id|+1': 1,
          username: '@name',
          sex: '@boolean',
          city: '@city',
          sign: '@csentence',
          experience: '@integer',
          score: '@integer',
          classify: '@word',
          wealth: '@integer',
          auth: '@boolean'
        }]
      }
    });
    //第一个实例
    table.render({
      method: 'post',
      // size: 'sm',
      limit: 10,
      elem: '#test',
      id:'test',
      toolbar: '#toolbarDemo',
      height: 'full-235',
      limit: 10,
      limits: [10,20,30],
      url: 'https://xnsmb.xnsoft.net.cn/api/Filtrate_Xn_Circle', //数据接口
      contentType: 'application/json',
      where: {
//	      "Name": "",
//		  "AreaCode": "",
		  "RankGuid": "",
		  "CategoryId": 2,
      },
      parseData: function(res){
      	return {
      		'code':0,
      		'count':res.TotalCount,
      		"data":res._Data
      	};
      },
      request: {
	    pageName: 'CurrentPage' //页码的参数名称，默认：page
	    ,limitName: 'PageSize' //每页数据量的参数名，默认：limit
	  },
      page: true, //开启分页
      cols: [
        [ //表头
          {
          	type: 'checkbox',
//          width: 70,
            sort: true,
            align: 'center',
            fixed: 'left'
          }, {
            field: 'Name',
            title: '商圈名称',
            align: 'center',
//          width: 160
          }, {
            field: 'InCircleName',
            title: '所属分会',
            align: 'center',
//          width: 160
          }, {
            field: 'CreateTime',
            title: '创立日期',
            align: 'center',
//          width: 160
          }, 
          {
            field: 'MemberName',
            title: '荣誉圈主',
            align: 'center',
//          width: 160
          }, 
          {
            field: 'Area',
            align: 'center',
            title: '区域',
//          width: 160,
//          sort: true
          }, {
            field: 'RankName',
            title: '商圈等级',
            align: 'center',
//          width: 160,
//          sort: true
          }, {
            field: 'MemberCount',
            title: '商圈人数',
            align: 'center',
            sort: true
//          width: 135
          }, 
//        {
//          field: 'IsAudit',
//          title: '是否审核',
//          align: 'center',
//          templet:function(d){
//          	if(d.IsAudit==0){
//          		return '<span>否</span>'
//          	}else if(d.IsAudit==1){
//          		return '<span>是</span>'
//          	}
//          }
////          width: 135
//        }, 
          {
            fixed: 'right',
            width: 220,
            align: 'center',
            toolbar: '#bartest'
          }
        ]
      ]
    });

	renderForm();

    $('#search_hash').on('click', function () {
    	console.log("reForm",reForm)
      var that = this;
      // console.log($('#search_tpl_hash').html());
      sidebar.render({
        elem: that,
        content: $('#search_tpl_hash').html(),
//      id:'this',
        title: '搜索',
        shade: true,
        // shadeClose:false,
        // direction: 'left'
        // dynamicRender: false,
        // url: 'views/member/all/search.html',
        width: '500px', //可以设置百分比和px
        done: function () {
          	let province = document.querySelector(".province");
        	let city = document.querySelector(".city");
        	let Areas = document.querySelector(".Area");
        	let memLev = document.querySelector(".memLev");
        	let re = document.querySelector(".reset");
        	let _where = ''
        	let memLevCode = '';
        	let ciArr = [];
        	let proArr = [];
        	let areaCode = '';
          console.log('province',province);
          form.render();
          
          $("#resets").click(function(){
          	console.log(1)
          	areaCode = '';
          	memLevCode = '';
          })
          
			$.ajax({//异步请求返回给后台
		    	  url:'https://xnsmb.xnsoft.net.cn/api/GetXn_DispatchRegion',
		    	  type:'get',
		    	  data:{FatherId:'0'},
		    	  dataType:'json',
		    	  beforeSend: function(request) {
			            
			            request.setRequestHeader("Authorization", 'bearer ' + localStorage.getItem("token"));
			        },
		    	  success:function(data){
		    	  	proArr = [...data];
		    		  //这里获取到数据执行显示
		    		  console.log("地址data",data)
						let p = document.createElement('option');
						p.value='';
						p.innerText="省份";
		    		  data.forEach((el,index)=>{
//		    		  	let op = document.createElement('option');
//		    		  	op.value = el.ID;
//		    		  	op.innerText = el.Name;
//		    		  	province.appendChild(op)
		    		  	$(".province").append("<option value='"+el.ID+"'>"+el.Name+"</option>");
		    		  	
		    		  })
		    		   console.log("fddfd",data)
		    		 form.render();
		    	  }
		    	  
		      });
		      
		      form.on('select(provinces)', function(data){
		      	$(".city").empty();
		      			console.log("data.value",data.value)
		      			proArr.forEach((el,index)=>{
		      				if(el.ID==data.value){
		      					areaCode=el.Code;
		      				}
		      			})
		      			if(data.value==""){
		      				areaCode="";
		      			}
		      			console.log("areaCode",areaCode);
						cityCode = data;
			//			console.log("seFrist",seFrist)
//					  console.log(data.value);
					  $.ajax({//异步请求返回给后台
					    	  url:'https://xnsmb.xnsoft.net.cn/api/GetXn_DispatchRegion',
					    	  type:'get',
					    	  data:{FatherId:data.value},
					    	  dataType:'json',
					    	  beforeSend: function(request) {
			            
			            request.setRequestHeader("Authorization", 'bearer ' + localStorage.getItem("token"));
			        },
					    	  success:function(data){
					    	  	ciArr = [...data];
					    		  //这里获取到数据执行显示
					    		  console.log(data)
			//		    		  console.log("secJobs",secJobs.length)
			//							secJobs="";
//										$(".city").empty();
//										let p = document.createElement('option');
//										p.value = "";
//										p.innerText = "城市";
//										city.appendChild(p)
										$(".city").append("<option value=''>城市</option>");
					    		  data.forEach((el,index)=>{
//					    		  	let op = document.createElement('option');
//					    		  	op.value = el.ID;
//					    		  	op.innerText = el.Name;
//			//		    		  	op.id = el.Id;
//					    		  	city.appendChild(op)
					    		  	$(".city").append("<option value='"+el.ID+"'>"+el.Name+"</option>");
					    		  })
					    		  renderForm();
					    		  
					    	  }
					    	  
					      });
					});   
					
					form.on('select(citys)', function(data){
						$(".Area").empty();
						let _city = data.value;
						if(data.value==""){
		      				areaCode=areaCode.substr(0,3);
		      			}
//						AreaCode = data;
			//			console.log("seFrist",seFrist)
//					  console.log(data.value);
					  $.ajax({//异步请求返回给后台
					    	  url:'https://xnsmb.xnsoft.net.cn/api/GetXn_DispatchRegion',
					    	  type:'get',
					    	  data:{FatherId:data.value},
					    	  dataType:'json',
					    	  beforeSend: function(request) {
			            
			            request.setRequestHeader("Authorization", 'bearer ' + localStorage.getItem("token"));
			        },
					    	  success:function(data){
					    	  	
					    		  //这里获取到数据执行显示
					    		  console.log(data)
//					    		  console.log("ciArr",ciArr)
					    		  ciArr.forEach((el,index)=>{
					    		  	if(el.ID==_city){
					    		  		areaCode=el.Code
					    		  	}
					    		  })
					    		  console.log("areaCode",areaCode)
//										$(".Area").empty();
//										let p = document.createElement('option');
//										p.value = "";
//										p.innerText = "区域";
//										Areas.appendChild(p)
										
										$(".Area").append("<option value=''>区域</option>");
					    		  data.forEach((el,index)=>{
//					    		  	let op = document.createElement('option');
//					    		  	op.value = el.Code;
//					    		  	op.innerText = el.Name;
//			//		    		  	op.id = el.Id;
//					    		  	Areas.appendChild(op)
					    		  	$("#quyu").append("<option value='"+el.Code+"'>"+el.Name+"</option>");
					    		  })
					    		  renderForm();
					    		  
					    	  }
					    	  
					      });
					}); 
					
					form.on('select(Areas)', function(data){
						console.log(data)
						if(data.value!=""){
//							debugger	
							areaCode = $("#quyu option:selected").val();
							
							
						}else{
							areaCode=areaCode.substr(0,6);
							console.log("areaCode11",areaCode);
						}
						
						console.log("areaCode",areaCode);
					})
					
					DBHelper.Get("GetXn_RankByCategoryId?id=2",function(data){
			          	console.log("rank",data)
			          	data.forEach((el,index)=>{
//					    		  	let op = document.createElement('option');
//					    		  	op.value = el.Guid;
//					    		  	op.innerText = el.Name;
//					    		  	memLev.appendChild(op)
					    		  	$(".memLev").append("<option value='"+el.Guid+"'>"+el.Name+"</option>");
					    		  })
			          	form.render();
			          },function(data){
			          	console.log(data)
			          })
					
					form.on('select(xing)', function(data){
						memLevCode = data.value;
					})
					
          //监听提交
          form.on('submit(formtest)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            console.log(areaCode); 
            table.reload('test', {
              where: {
              	"Name": $("#busiName").val(),
				  "AreaCode": areaCode,
				  "RankGuid": $("#memLev option:selected").val(),
				  "CategoryId": 2,
              }
            });
            return false;
          });
        }
      });
    });
    
    function renderForm(){
		  layui.use('form', function(){
		   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
		   form.render();
		  });
		}
    
//		批量添加到checkbox数组
//		table.on('checkbox(test)', function(obj){
////		  console.log("obj.checked",obj.checked); //当前是否选中状态
////		  console.log("obj.data",obj.data); //选中行的相关数据
////		  console.log("obj.type",obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
//			console.log(obj.data)
//			if(obj.type=="one"){
//				if(obj.checked){
//					objArr.push(obj)
//					checkedArr.push(obj.data.Guid)
//					console.log(objArr)
//				}else if(!obj.checked){
//					objArr.splice(objArr.indexOf(obj.data),1)
//					checkedArr.splice(checkedArr.indexOf(obj.data.Guid),1)
//					console.log(objArr)
//				}
//			}
//		
//		});

table.on('checkbox(test)', function(obj){
			var checkStatus = table.checkStatus('test');
			let temp = [];
			let tempObj = [];
			checkStatus.data.forEach((el,index)=>{
				temp.push(el.Guid);
			})
			checkedArr = temp;
			console.log(temp)
		});
    
    
    table.on('tool(test)',function(obj){
    	toolHandel("#/layui/addBusi?id=","Admin_Xn_Circle/",obj,"#/layui/busiDetail?id=","#/layui/busiMemList?id=","#/layui/changeBusiInte?id=");
    })
    
    
    
//  批量删除
    batchDel.addEventListener("click",function(){
	    	console.log("checkedArr",checkedArr)
	    	if(checkedArr.length!=0){
	    		layer.confirm('确认删除？', function(index){
					layer.close(index);	
					console.log("checkedArr",checkedArr)
					DBHelper.Delete("Admin_Xn_Circle",checkedArr,function(data){
				      	console.log(data)
				      },function(data){
				      	table.reload('test', {
								});
				      	console.log(data)
				      })
					
		    });
	    	}else if(checkedArr.length==0){
			layer.alert("请选择至少一个选项")
		}
			
			
    })
    
//  变更等级积分
	changeInte.addEventListener("click",function(data){
//		console.log("HI")
		if(checkedArr.length>1){
			layer.alert("请不要选择超过两个选项")
		}else if(checkedArr.length==1){
			window.location.href="#/layui/changeBusiInte?id="+checkedArr[0];
		}else if(checkedArr.length==0){
			layer.alert("请选择一个选项")
		}
	})
	
//	禁止商圈
//	downs.addEventListener("click",function(data){
//  	if(checkedArr.length!=0){
//  		layer.confirm('确认禁止？', function(index){
//  			layer.close(index);	
//  			checkedArr.forEach((el,index)=>{
//	    			DBHelper.Get("Admin_Xn_Circle?id="+el,function(data){
//	    				console.log(data)
//	    				let _obj = data;
//	    				_obj.IsAudit=0;
//	    				DBHelper.Put("Admin_Xn_Circle?id="+el,_obj,function(data){
//	    					console.log(data)
//	    					table.reload('test', {});
//	    				},function(data){
//	    					console.log(data)
//	    				})
//	    			},function(data){
//	    				console.log(data)
//	    			})
//	    		})
//	    		
//  		})
//  	}
//  })
    
    
    
    
  });
  
  
    
</script>

<style scoped>
	.spt {
		line-height: 35px;
	}
	/*.s_area{
		display: inline-block;
		width: 100px;
	}*/
	.clearfix::after {
		content: "";
		clear: both;
		width: 100%;
		height: 0;
		display: block;
	}
	
	.layui-date>input {
		width: 100px;
		margin: 0 10px;
	}
	
	.fl {
		float: left;
	}
</style>



<style scoped>
	.title{
  		margin-left: 30px;
  		margin-top: 30px;
  	}
	.spt {
		line-height: 35px;
	}
	
	.clearfix::after {
		content: "";
		clear: both;
		width: 100%;
		height: 0;
		display: block;
	}
	
	.layui-date>input {
		width: 100px;
		margin: 0 10px;
	}
	
	.fl {
		float: left;
	}
</style>



